<template>
    <div class="wrapper">
        <h1>PropsZi-3-Input</h1>
        <!-- 默认modelValue -->
        <!-- <input :value="modelValue" @input="emit('update:modelValue', (<HTMLInputElement>$event.target).value)" /> -->
        <!-- 使用别名 -->
        <input :value="alias" @input="emit('update:alias', (<HTMLInputElement>$event.target).value)" />
    </div>
</template>

<script lang="ts" setup name="PropsZi3Input">
import { ref } from 'vue'

// <!-- vue约定自定义组件使用v-model时，组定义组件内部需要实现modelValue的赋值，和update:modelValue的defineEmits --> <!-- vue2使用 :value @input -->
// defineProps(['modelValue'])
// const emit = defineEmits(['update:modelValue'])

// 使用别名
defineProps(['alias'])
const emit = defineEmits(['update:alias'])

</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

input {
    border: 2px solid black;
    background-image: linear-gradient(45deg, red, yellow, green);
    height: 30px;
    font-size: 20px;
    color: white;
}
</style>